<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Docker Box</title>
</head>
<body class="bg">
    {% for route in routes %}
        <h2>{{ route.title }}</h2>
        {% if route.type == 'link' %}
            <ul>
                {% for url in route.urls %}
                    <li>
                        <a href="{{url}}"> {{ url }} </a>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            {% if route.type == 'table' %}
                <table class="my-table" border="1">
                    <tr>
                        <th bgcolor="darkgoldenrod">节点</th>
                        <th bgcolor="darkgoldenrod">状态</th>
                        <th bgcolor="darkgoldenrod">容器数量</th>

                    </tr>
                    {% for item in route.urls %}
                    <tr>
                        <td>{{item.endpoint_name}}</td>
                        <td>{{item.endpoint_status}}</td>
                        <td class="right-align">{{item.container_num}}</td>
                    </tr>
                    {% endfor %}
                </table>
                <div class="my-div"></div>
            {% endif %}
        {% endif %}
    {% endfor %}
</body>
<style>
    .bg{
        background-image: url("/static/bg.jpg");
        /*background-size: 100%, 100%;*/
        background-size: 100% 100%;
        background-attachment: fixed;
        /*background-repeat: repeat;*/
    }
    .my-table{
        width: auto;
        height: auto;
        margin: 0 auto;
        margin-top: auto;
        background-color: beige;
        font-size: 18px;
        float: left;
    }
    .my-div{
        clear: both;
    }
    .right-align {
        text-align: right;
    }
</style>
</html>